<template>
    <div style="padding: 40px 24px" class="shoppingBox">
        <el-row class="margin0" style="padding: 24px 0">
            <el-col :span="6" style="padding: 0 24px 0 0">
                <div class="mainBackgroundColor border-radius8">
                    <div class="overflowHidden" style="padding: 20px 46px 20px 60px">
                        <span class="floatLeft fontSize18 color333 fontWeight500 titleFont">
                            <span v-if="monthTime">{{monthTime}}月</span><i class="el-icon-arrow-down"></i>
                            <el-date-picker
                                    v-model="time"
                                    v-if="monthTime"
                                    type="month"
                                    size="mini"
                                     @change="changeMonth"
                                    format="yyyy-MM"
                                    style="width: 100px;opacity: 0;margin-left: -50px"
                                    value-format="yyyy-MM"
                                    placeholder="选择日期">
                         </el-date-picker>
                        </span>
                        <span class="floatRight fontSize18 color333 fontWeight500 titleFont">订单数量</span>
                    </div>
                    <div style="padding: 18px 46px 32px 46px;" class="borderTop006 overflowHidden flex-box flex-align-items-center flex-justify-content-space-between">
                        <div class="inline-block shoppingIcon" style="width: 56px;height: 56px;background-color: red;border-radius: 50%;"></div>
                        <div class="inline-block fontWeight600 fontSize45 shoppingFont" style="line-height: 56px">{{topData.orderCount}}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" style="padding: 0 24px 0 0">
                <div class="mainBackgroundColor border-radius8">
                    <div class="overflowHidden" style="line-height: 60px;padding: 0 46px 0 60px">
                        <span class="fontSize18 color333 fontWeight500 titleFont" v-if="monthTime">{{monthTime}}月</span>
                        <span class="floatRight fontSize18 color333 fontWeight500 titleFont">积分收入</span>
                    </div>
                    <div style="padding: 18px 46px 32px 46px;" class="borderTop006 overflowHidden flex-box flex-align-items-center flex-justify-content-space-between">
                        <div class="inline-block shoppingIcon" style="width: 56px;height: 56px;background-color: red;border-radius: 50%"></div>
                        <div class="inline-block fontWeight600 fontSize45 shoppingFont middle" style="line-height: 56px">{{topData.totalPoint}}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" style="padding: 0 24px 0 0">
                <div class="mainBackgroundColor border-radius8">
                    <div class="overflowHidden" style="line-height: 60px;padding: 0 46px 0 60px">
                        <span class="fontSize18 color333 fontWeight500 titleFont" v-if="monthTime">{{monthTime}}月</span>
                        <span class="floatRight fontSize18 color333 fontWeight500 titleFont">成交金额</span>
                    </div>
                    <div style="padding: 18px 46px 32px 46px;" class="borderTop006 overflowHidden flex-box flex-align-items-center flex-justify-content-space-between">
                        <div class="inline-block shoppingIcon" style="width: 56px;height: 56px;background-color: red;border-radius: 50%"></div>
                        <div class="inline-block fontWeight600 fontSize45 shoppingFont" style="line-height: 56px">
                            <span style="font-size: 30px" class="rmb">¥</span>{{topData.totalMoney}}
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="mainBackgroundColor border-radius8">
                    <div class="overflowHidden" style="line-height: 60px;padding: 0 46px 0 60px">
                        <span class="fontSize18 color333 fontWeight500 titleFont" v-if="monthTime">{{monthTime}}月</span>
                        <span class="floatRight fontSize18 color333 fontWeight500 titleFont">核销订单数</span>
                    </div>
                    <div style="padding: 18px 46px 32px 46px;" class="borderTop006 overflowHidden flex-box flex-align-items-center flex-justify-content-space-between">
                        <div class="inline-block shoppingIcon" style="width: 56px;height: 56px;background-color: red;border-radius: 50%"></div>
                        <div class="inline-block fontWeight600 fontSize45 shoppingFont" style="line-height: 56px">{{topData.consumeCount}}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%;border-radius: 8px" class="mainBackgroundColor">
            <div style="height: 68px;line-height: 68px;padding: 0 24px" class="borderBottom006">
                <span class="fontSize16 color085 fontWeight500">销售统计</span>
                <el-date-picker
                        v-model="saleTime.time"
                        type="daterange"
                        size="mini"
                        @change="changeSale"
                        class="floatRight"
                        style="margin-top: 20px"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
<!--            :picker-options="pickerOptions"-->
            <div style="padding: 26px 30px 40px 30px">
                <div id="container" style="width:100%;height: 500px"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    // import {statisticsOverview ,statisticsDailySummary} from "src/api/shoppingMall";
    import moment from 'moment';
    export default {
        name: "index",
        data(){
            return{
                time:"",
                monthTime:null,
                saleTime:{
                    start:null,
                    end:null,
                    time:""
                },
                topData:{
                    // totalMoney:0,
                    // totalPoint:0,
                    // consumeCount:0,
                    orderCount:0,
                },
                saleObj:{},
                pickerOptions:{}
            }
        },
        computed:{

        },
        mounted() {
            // this.initChart();
            this.initMonthTime();
            this.initSaleTime();
            this.pickerOptions = {
                disabledDate: time => {
                    if (this.selectDate == null) {
                        return false
                    } else {
                        return (this.selectDate.getMonth() + 1 != time.getMonth() + 1)
                    }
                },
                onPick: date => {
                    // 如果只选择一个则保存至selectDate 否则selectDate 为空
                    if (date.minDate && !date.maxDate) {
                        this.selectDate = date.minDate
                    } else {
                        this.selectDate = null
                    }
                }
            }
        },
        methods:{
            initMonthTime(){
                let date=new Date;
                let year=date.getFullYear();
                let month=date.getMonth()+1;
                month =(month<10 ? "0"+month:month);
                this.monthTime = month;
                this.statisticsOverview(year + '-' + month)
            },
            initSaleTime(){
                let date=new Date;
                let dateStart=new Date;
                let dateEnd=new Date;
                dateStart.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                dateEnd.setTime(date.getTime() - 3600 * 1000 * 24);
                this.saleTime.start = moment(dateStart).format("yyyy-MM-DD");
                this.saleTime.end = moment(dateEnd).format("yyyy-MM-DD");
                this.saleTime.time = [this.saleTime.start,this.saleTime.end];
                this.statisticsDailySummary(moment(dateStart).format("yyyy-MM-DD"),moment(dateEnd).format("yyyy-MM-DD"))
            },
            statisticsOverview(month){
                statisticsOverview({month:month}).then(response => {
                    if(response.code == 20000) {
                        this.topData = response.data;
                    }
                })
            },
            statisticsDailySummary(start,end){
                statisticsDailySummary({start:start,end:end}).then(response => {
                    if(response.code == 20000) {
                        this.saleObj = response.data;
                        this.initChart();
                    }
                })
            },
            changeMonth(val){
                this.monthTime = val.substring(val.length-2,val.length);
                this.statisticsOverview(val)
            },
            changeSale(val){
                console.log("",val)
                this.statisticsDailySummary(val[0],val[1])
            },
            initChart(){
                let dom = document.getElementById("container");
                let myChart = echarts.init(dom);
                let app = {};
                let option;

                option = {
                    title: {
                        // text: '销售统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['订单总数量', '订单成功数量']
                    },
                    grid: {
                        left: '0',
                        right: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '成功订单数量',
                            type: 'line',
                            stack: 'Total',
                            data: []
                        },
                        {
                            name: '核销订单数量',
                            type: 'line',
                            stack: 'Total',
                            data: []
                        }
                    ]
                };

                if(this.saleObj.dates){
                    this.saleObj.dates.forEach((item) => {
                        option.xAxis.data.push(item);
                    });
                }

                if(this.saleObj.orderSummary){
                    this.saleObj.orderSummary.forEach((item) => {
                        option.series[0].data.push(item.orderCount);
                    });
                }

                if(this.saleObj.consumeSummary){
                    this.saleObj.consumeSummary.forEach((item) => {
                        option.series[1].data.push(item.orderCount);
                    });
                }

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
            },

        }
    }
</script>

<style lang="scss">
    /*@media screen and (max-width: 1625px) {*/
    /*    */
    /*}*/

    @media screen and (min-width: 1480px) and (max-width: 1625px){
        .shoppingBox{
            .shoppingFont{
                font-size: 36px !important;
            }
            .shoppingIcon{
                width: 50px !important;
                height: 50px !important;
            }
            .rmb{
                font-size: 26px !important;
            }
        }
    }

    @media screen and (min-width: 1325px) and (max-width: 1479px){
        .shoppingBox{
            .shoppingFont{
                font-size: 28px !important;
            }
            .shoppingIcon{
                width: 38px !important;
                height: 38px !important;
            }
            .rmb{
                font-size: 22px !important;
            }
        }
    }

    @media screen and (max-width: 1325px){
        .shoppingBox{
            .shoppingFont{
                font-size: 22px !important;
            }
            .shoppingIcon{
                width: 32px !important;
                height: 32px !important;
            }
            .rmb{
                font-size: 18px !important;
            }
        }
    }

    @media screen and (max-width: 1300px){
        .shoppingBox{
            .titleFont{
                font-size: 14px !important;
            }
        }
    }
</style>